<template>
  <div class="content" :style="{ padding: borderMargin + 'px', height: bodyHeight + 'px' }">
    <div v-if="$slots.header" :class="['header', headBorder ? 'header-border' : '']" :style="{ height: headerHeight + 'px', padding: (headerHeight / 2) + 'px' }">
      <slot name="header" />
    </div>
    <div v-else :class="['header', headBorder ? 'header-border' : '']" :style="{ height: headerHeight + 'px' }">
      <span>{{ title }}</span>
      <slot name="btns" />
    </div>
    <div :class="['body', $slots.footer ? 'body-with-footer' : 'body-no-footer']">
      <slot />
    </div>
    <div v-if="$slots.footer" :class="['footer', footBorder ? 'footer-border' : '']" :style="{ height: footerHeight + 'px' }">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContentBody',
  props: {
    borderMargin: { type: Number, default: 10 },
    headBorder: { type: Boolean, default: true },
    footBorder: { type: Boolean, default: true },
    title: { type: String, default: '测试' }
  },
  data() {
    return {
      bodyHeight: 200,
      headerHeight: 36,
      footerHeight: 36
    }
  },
  watch: {
    '$store.state.settings.viewHeight': function() {
      this.calcHeight()
    }
  },
  mounted() {
    this.calcHeight()
  },
  methods: {
    calcHeight() {
      this.bodyHeight = this.$store.getters.contentHeight
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  background: #fff;
  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    font-size: 16px;
  }
  .header-border {
    border-bottom: solid 1px rgb(235, 235, 235);
  }

  .body {
    padding: 6px;
    overflow: auto;
  }
  .body-with-footer {
    height: calc(100% - 72px);
  }
  .body-no-footer {
    height: calc(100% - 36px);
  }

  .footer {
    padding: 6px;
  }
  .footer-border {
    border-top: solid 1px rgb(235, 235, 235);
  }
}
</style>
